<template>
  <MainPage activeMenu="/register">
    <el-container>
      <el-main>
        <div class="register-container">
          <el-card class="register-card">
            <h2>注册</h2>
            <el-form :model="form" ref="form" :rules="rules" label-width="120px">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="form.userName" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleRegister" style="width: 100%;">注册</el-button>
              </el-form-item>
            </el-form>
            <el-alert v-if="alertMessage" :title="alertMessage.title" :type="alertMessage.type" show-icon />
          </el-card>
        </div>
      </el-main>
    </el-container>
  </MainPage>
</template>

<script>
import MainPage from '../Component/MainPage.vue';
import axios from '../../axios/axios'; // 导入 axios

export default {
  components: {
    MainPage
  },
  data() {
    return {
      activeMenu: '/register',
      form: {
        userName: '',
        password: '',
        phone: '',
        email: ''
      },
      alertMessage: null, // 用于存储提示信息
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^[0-9]{11}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleRegister() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 实现注册逻辑
          axios.post('/guest/register', this.form)
            .then(response => {
              // 处理注册成功后的逻辑
              console.log('注册成功:', response.data);
              this.alertMessage = {
                title: "注册成功",
                type: "success"
              };
            })
            .catch(error => {
              // 处理注册失败后的逻辑
              console.error('注册失败:', error.response ? error.response.data : '请求失败');
              this.alertMessage = {
                title: error.response ? error.response.data : '注册失败',
                type: "error"
              };
            });
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.register-card {
  width: 400px;
}
</style>
